<template>
<div id="Beijian" class="page-blank">
  <van-nav-bar title="业务员备件库" left-arrow @click-left="goBack()"/>
  <van-search v-model.trim="searchValue" placeholder="请输入业务员名称" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="tongji-box" v-for="(item, index) in list" :key="index" @click="showBlank( item )">
        <div class="tongji-item">
          <div class="tongji-row">
            <div>业务员：</div>
            <div>{{ item.salesmanName }}</div>
          </div>
          <div class="tongji-row">
            <div>业务员ID：</div>
            <div>{{ item.salesmanId }}</div>
          </div>
          <div class="tongji-row">
            <div>机柜数：</div>
            <div>{{ item.terminalCount }}</div>
          </div>
          <div class="tongji-row">
            <div>充电宝数：</div>
            <div>{{ item.chargerCount }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </div>  
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';
declare const wx: any;

@Component
export default class Beijian extends Vue {


  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''

  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }
  getList() {
    let page = this.page, size = 10;
    axios.get('/api/bjk/bjkCount', { page, size, content: this.searchValue || null }).then((res: any) => {
      if ( this.page != page ) return ;
      this.page = page + 1;
      let json = res || {}; 
      let list = json.list || [];
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  goBack() {
    this.$router.go(-1);
  }

  created() {
  }
  
};
</script>

<style lang="scss">
#ChuruList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; 
}
</style>

